<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="shortcut icon" href="__IMG__/favicon.ico" />
		<link rel="bookmark" href="__IMG__/favicon.ico" type="image/x-icon" 　/>
		<title>回水记录</title>
		<link rel="stylesheet" type="text/css" href="__CSS__/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="__CSS__/common.css"/>
		<script src="__JS__/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
	      	mui.init();
       </script>
       <style type="text/css">
       	.table_box table{
       		width: 100%;
       		text-align: center;
       		border: none;
       		background: #FFF;
       	}
       	.table_box table th{
       		background: #D8D8D8;
       	}
       	.table_box table th,.table_box table td{
       		border: none;
       		padding: 10px 2px;
       	}
       	.table_box table tr{
       		border-bottom: 1px solid #D8D8D8;
       	}
       </style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">回水记录(总：{$total})</h1>
		</header>
		
		<div class="mui-content">
			<input type="hidden" id="page" value="{$now_page}">
		    <div class="table_box">
		    	<table border="" cellspacing="" cellpadding="" class="inner">
		    		<tr>
		    			<th>时间</th>
		    			<th>彩种</th>
						<th>房间</th>
						<th>金额</th>
		    		</tr>
					{foreach $data as $k=>$v}
		    		<tr>
		    			<td>{$v['create_at']|date="Y-m-d",###}</td>
		    			<td>{$v['cate']}</td>
						<td>{$v['hall']}</td>
		    			<td>{$v['money']}</td>
		    		</tr>
                    {/foreach}
		    	</table>
		    </div>
		</div>
	</body>
	<script src="__JS__/zepto.min.js"></script>
	<script src="__JS__/dropload.min.js"></script>
	<script>
		var stop=true;
		$(window).scroll(function(){
			totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
			if($(document).height() <= totalheight){
				var page = parseInt($('#page').val())+1;
				$.ajax({
					type: 'GET',
					url: "{:url('mine/back_api')}",
					data:{'page':page},
					dataType: 'json',
					success: function(data){
						var my       = data.data.data;
						var now_page = data.data.now_page;
						var result = '';
						for(var i = 0; i < my.length; i++){
							result+="<tr>"
									+"<td>"+my[i].create_at+"</td>"
									+"<td>"+my[i].cate+"</td>"
									+"<td>"+my[i].hall+"</td>"
									+"<td>"+my[i].money+"</td>"
									+"</tr>";
							$('#page').val(now_page)
						}

						// 为了测试，延迟1秒加载
						setTimeout(function(){
							$('.inner').append(result);
							// 每次数据加载完，必须重置
						},1000);
					},
					error: function(xhr, type){
						alert('Ajax error!');
						// 即使加载出错，也得重置
					}
				});
			}
		});
	</script>
</html>
